<template>
  <el-dialog
    v-model="visible"
    :title="$t('seckill.view')"
    :close-on-click-modal="false"
    width="764px"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="auto"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <el-form-item
        :label="$t('shop.pickupLocationName')"
        prop="stationName"
      >
        <el-input
          disabled
          :value="dataForm.stationName"
        />
      </el-form-item>
      <el-form-item
        v-if="dataForm.pic"
        :label="$t('platform.stationImg')"
        prop="pic"
      >
        <img-upload
          v-model="dataForm.pic"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item :label="$t('shop.telNumber')">
        <el-input
          disabled
          :value="(dataForm.phonePrefix ? dataForm.phonePrefix + ' - ' : '') + dataForm.phone"
        />
      </el-form-item>
      <el-form-item
        :label="$t('brand.status')"
        prop="status"
      >
        <el-radio-group
          v-model="status"
          disabled
        >
          <el-radio :label="1">
            {{ $t('shop.business') }}
          </el-radio>
          <el-radio :label="0">
            {{ $t('seckill.close') }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="$t('shop.address')"
        prop="status"
      >
        <el-input
          disabled
          type="textarea"
          rows="3"
          :value="dataForm.province + dataForm.city + dataForm.area + dataForm.addr"
        />
      </el-form-item>
      <el-form-item label=" ">
        <div class="map">
          <tmap
            ref="tmapRef"
            :lat-lng="center"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t('shop.return') }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

const dataForm = ref({
  stationId: null,
  stationName: null,
  pic: null,
  phonePrefix: null,
  phone: null,
  status: 0,
  provinceId: null,
  province: null,
  cityId: null,
  city: null,
  areaId: null,
  area: null,
  addr: null,
  lng: null,
  lat: null
})

const visible = ref(false)
const dataFormRef = ref(null)
const init = (stationId) => {
  dataForm.value.stationId = stationId || 0
  visible.value = true

  nextTick(async () => {
    dataFormRef.value?.resetFields()
    dataFormRef.value?.resetFields()
    dataForm.value.provinceId = null
    dataForm.value.cityId = null
    dataForm.value.areaId = null
    // 等待地址信息返回
    listAreaByParentId().then(() => {
      if (dataForm.value.stationId) {
        getDataInfo()
      }
    })
    setCenter()
  })
}

const status = ref(0)
const center = ref(null)
// 获取商城详情数据
const getDataInfo = () => {
  http({
    url: http.adornUrl('/platform/station/info/' + dataForm.value.stationId),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    dataForm.value = data
    status.value = dataForm.value.status === 1 ? 1 : 0
    center.value = {
      lng: dataForm.value.lng,
      lat: dataForm.value.lat
    }
  })
}

const listAreaByParentId = (pid) => {
  let paramData
  if (!pid) {
    paramData = { level: 1 }
  } else {
    paramData = { pid }
  }
  return http({
    url: http.adornUrl('/admin/area/listByPid'),
    method: 'get',
    params: http.adornParams(paramData)
  })
}

const zoom = ref(18)
/**
 * 初始化地图数据
 */
const setCenter = () => {
  center.value = null
  center.value = {
    lng: 113.327955,
    lat: 23.136783
  }
  zoom.value = 18
}

defineExpose({
  init
})

</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 220px;
}
</style>
